<template>
  <el-cascader size="mini" separator="-" :options="depts" :props="props" :value="value" @change="handleChange">
    <!-- 级联组件 :   必须绑定树形结构 -->
  </el-cascader>
</template>

<script>
import { getDepartmentsAPI } from '@/api/department'
import { transListToTreeData } from '@/utils/index'
export default {
  props: {
    // 由于父级使用的是-model做数据绑定，这里必须value接收
    value: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      // 组织架构的部门列表树形结构数据
      depts: [],
      props: {
        value: 'id', // 级联选项选中的值，给代码看的
        label: 'name' // 级联选项展示的值，给用户看的
      }
    }
  },
  created() {
    // 获取组织架构的 部门列表 数据 并转成树形结构
    this.getDepartmentList()
  },
  methods: {
    // 获取组织架构的 部门列表 数据 并转成树形结构
    async getDepartmentList() {
      // 调用组织架构的接口方法
      const res = await getDepartmentsAPI()
      this.depts = transListToTreeData(res, 0)
    },
    // 监听用户切换部门: params(选项的部门ID列表) === [1，4，11]
    handleChange(params) {
      if (params.length > 0) {
        this.$emit('input', params[params.length - 1])
      } else {
        this.$emit('input', null)
      }
    }
  }
}
</script>

<style>

</style>
